<template>
  <div>
    <div class="main">
      <!-- 一个菜单 -->
      <div class="img-box" @click="toCaiPuPage()">
        <img :src="pic" class="auto-img" />
        <div class="mask">
          <span class="title">{{ title }}</span>
          <span class="author">{{ count }}篇菜谱</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
  },
  data() {
    return {
      pic:
        "https://i3.meishichina.com/attachment/recipe/2018/02/02/20180202151754147560613.jpg?x-oss-process=style/c320",
      title: "一个菜单",
      url:
        "https://i3.meishichina.com/attachment/recipe/2018/02/02/20180202151754147560613.jpg?x-oss-process=style/c320",
      authorName: "王楷",
      authorUrl: "",
      count: 1,
    };
  },
  methods: {
    toAuthorPage() {
      //todo
      this.$router.push("/index");
    },
    toCaiPuPage() {
      //todo
      this.$router.push("/caidan/" + this.id);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  margin: 0;
  padding: 0;
  width: 296px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid honeydew;
  border-radius: 15px;
  overflow: hidden;
  .img-box {
    width: 296px;
    height: 200px;
    perspective: 200px;
    overflow: hidden;
    position: relative;
    &:hover {
      cursor: pointer;
      img {
        transform: translateZ(20px);
      }
    }
    img {
      height: 100%;
      width: 100%;
      transition: 1s all;
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      text-align: center;
      background-color: rgba(99, 99, 99, 0.2);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        line-height: 40px;
        font-size: 25px;
        font-weight: 500;
        transition: all 0.2s;
      }
      .author {
        line-height: 20px;
        font-size: 13px;
        transition: all 0.2s;
      }
    }
  }
}
</style>

